import Taro ,{ Component } from '@tarojs/taro'
import { View ,Image} from '@tarojs/components'

import { AtSwipeAction ,AtTabs , AtTabsPane , AtFloatLayout} from "taro-ui"

import CarItem from '../../component/CarItem/carItem.js'

import DataManager from '../../utils/DataManager.js'
import ListEmptyView from '../../component/LiseEmptyView/listEmptyView.js'
import emptyIcon from '../../image/ic_empty.png'

import {base_url} from "../../network/config";
import postImage from '../../image/post.png'

import './myCarList.scss'
import BasePage from "../basePage";
import {COMMON_CONST} from "../../utils/const";

let ridingPage = 1;
let driverPage = 1;

export default class myCarList extends BasePage{

  config = {
    navigationBarTitleText: '我的车列表'
  }

  constructor() {
    super(...arguments)
    this.state = {
      postTypeViewShow:false ,
      ridingList:[],
      driverList:[],
      tabCurrent:0
    }
  }

  componentDidMount () {
    this.loadMyCarList(ridingPage , 0)
    this.loadMyCarList(driverPage , 1)

    Taro.eventCenter.on('ridingPost',() => {
      ridingPage = 1;
      this.loadMyCarList(ridingPage , 0)
    })
    Taro.eventCenter.on('driverPost',() => {
      driverPage = 1;
      this.loadMyCarList(driverPage , 1)
    })
  }

  onPullDownRefresh(){
    if (this.state.tabCurrent == 1){
      ridingPage = 1;
      this.loadMyCarList(ridingPage , 0)
    } else {
      driverPage = 1;
      this.loadMyCarList(driverPage , 1)
    }
  }

  onReachBottom(){
    if (this.state.tabCurrent == 1){
      ridingPage ++;
      this.loadMyCarList(ridingPage , 0)
    } else {
      driverPage ++;
      this.loadMyCarList(driverPage , 1)
    }
  }

  loadMyCarList(page , type){
    console.log('loadpage------------' + page)

    let _this = this;
    let url = base_url + 'rest/car/myCarList'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        pageNo:page,
        pageSize:COMMON_CONST.LIST_SIZE,
        type:type
      },
      method: 'GET',
      success(res) {
        if (!res.data || !res.data.data || !res.data.data.list || res.data.data.list.length < 1){
          if (type == 0){
            if (ridingPage > 1){
              ridingPage --;
            }
          } else if (type == 1){
            if (driverPage > 1){
              driverPage --;
            }
          }
        }

        let subList = [];
        if (type == 0){
          if (page == 1){
            subList = res.data.data.list;
          } else {
            subList = _this.state.ridingList.concat(res.data.data.list)
          }

          _this.setState({
            ridingList:subList
          })
        } else if (type == 1){
          if (page == 1){
            subList = res.data.data.list;
          } else {
            subList = _this.state.driverList.concat(res.data.data.list)
          }
          _this.setState({
            driverList:subList
          })
        }
      },
      fail(){
        if (type == 0){
          if (ridingPage > 1){
            ridingPage --;
          }
        } else if (type == 1){
          if (driverPage > 1){
            driverPage --;
          }
        }
      },
      complete(){
        Taro.stopPullDownRefresh();
      }
    })
  }


  handleClick = (item , data) =>{
    if (data.text == '完成'){
      this.updateCarState(item.id , 2 , item.type)
    } else if (data.text == '删除'){
      this.updateCarState(item.id , 3 , item.type)
    }
  }


  //carstatus  2 完成  3删除
  updateCarState(carId , carStatus , carType){
    let _this = this;
    Taro.request({
      url:base_url + 'rest/car/updateCar',
      data:{
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'wechat',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        id:carId,
        carStatus:carStatus
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success(res2) {

        console.log('------------' + JSON.stringify(res2))

        if (carType == 0) {
          Taro.eventCenter.trigger('ridingPost' ,[]);
          ridingPage = 1;
          _this.loadMyCarList(ridingPage ,0)
        } else if (carType == 1) {
          Taro.eventCenter.trigger('driverPost' ,[]);
          driverPage = 1;
          _this.loadMyCarList(driverPage , 1)
        }
      }
    })
  }


  handleOptionClick = (pos) =>{
    this.setState({
      tabCurrent : pos
    })
  }

  handleFloatClose(){
    this.setState({
      postTypeViewShow : false
    })
  }

  handlePostClick(event){
    this.setState({
      postTypeViewShow:true
    })
  }

  handleRidingPost(){
    Taro.navigateTo({
      url: '/pages/post/ridingPost'
    })
  }

  handleDriverPost(){
    Taro.navigateTo({
      url: '/pages/post/driverPost'
    })
  }

  render(){

    let tabList = [{ title: '人找车' }, { title: '车找人' }]
    let options = [ { text: '完成', style: { backgroundColor: '#6190E8' } }, { text: '删除', style: { backgroundColor: '#FF4949' } }];
    return(
      <View className='my-car-list-container'>
        <View className='carList-option-container'>
          <AtTabs
            current={this.state.tabCurrent}
            tabList={tabList}
            onClick={this.handleOptionClick.bind(this)}
            swipeable={false}
          >
            <AtTabsPane current={this.state.tabCurrent} index={0}>
              {this.state.ridingList.length > 0 ? this.state.ridingList.map(item => {
                return (
                  <AtSwipeAction autoClose  onClick={this.handleClick.bind(this , item)} options={options} >
                    <CarItem carData={item}></CarItem>
                  </AtSwipeAction>)
              })
              :
              <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={1}>
              {this.state.driverList.length > 0 ? this.state.driverList.map(item => {
                return (
                  <AtSwipeAction autoClose  onClick={this.handleClick.bind(this , item)} options={options}>
                    <CarItem carData={item}></CarItem>
                  </AtSwipeAction>)
              })
              :
              <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon}/>
              }
            </AtTabsPane>
          </AtTabs>
          <AtFloatLayout isOpened={this.state.postTypeViewShow} title='选择您要发布的信息类型' onClose={this.handleFloatClose.bind(this)}>
            <View className='post-item' onClick={this.handleRidingPost.bind(this)}>人找车</View>
            <View className='post-item' onClick={this.handleDriverPost.bind(this)} >车找人</View>
            {/*<View className='post-item' onClick={this.handleGoodsPost.bind(this)} >货找车</View>*/}
            {/*<View className='post-item' onClick={this.handleTransportPost.bind(this)} >车找货</View>*/}
          </AtFloatLayout>
          <View className='post-entry' >
            <Image  src={postImage} style="width:50px; height:50px;position:relative" onClick={this.handlePostClick.bind(this)} />
          </View>
        </View>
      </View>
    )
  }

}
